﻿{extend name="home_layout" /}
{block name="style"}
<!-- 本页样式表 -->
<link href="__CSS__/article.css" rel="stylesheet" />
{/block}
{block name="body"}
<!-- 主体（一般只改变这里的内容） -->
<div class="blog-body">
    <div class="blog-container">
        <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
            <a href="{:url('/')}" title="网站首页">网站首页</a>
            <a><cite>文章专栏</cite></a>
        </blockquote>
        <div class="blog-main">
            <div class="blog-main-left">
                {if ($s) AND (!count($articles))}
                <div class="shadow" style="text-align:center;font-size:16px;padding:40px 15px;background:#fff;margin-bottom:15px;">
                    未搜索到与【<span style="color: #FF5722;">{$s}</span>】有关的文章，随便看看吧！
                </div>
                {/if}
                {volist name="articles" id="article"}
                <div class="article shadow">
                    <div class="article-left">
                        <img src="{$article->cover}" alt="{$article->title}" />
                    </div>
                    <div class="article-right">
                        <div class="article-title">
                            <a href="{:url('/article_'.$article->id)}">{$article->title}</a>
                        </div>
                        <div class="article-abstract">
                            {$article->desc}                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="article-footer">
                        <span><i class="fa fa-clock-o"></i>&nbsp;{$article->create_time}</span>
                        <span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;{$article->author}</span>
                        <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="#">{$article->labelText}</a></span>
                        <span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;{$article->brow_volume}</span>
                        <span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;{$article->brow_volume}</span>
                    </div>
                </div>
                {/volist}
            </div>
            <div class="blog-main-right">
                <div class="blog-search">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <div class="search-keywords  shadow">
                                <input type="text" name="key" value="{$s}" lay-verify="required" placeholder="输入关键词搜索" autocomplete="off" class="layui-input">
                            </div>
                            <div class="search-submit  shadow">
                                <button class="search-btn" lay-submit="search" lay-filter="search"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="article-category shadow">
                    <div class="article-category-title">分类导航</div>
                    {volist name="labels" id="label"}
                    <a href="{:url('/technology/'.$label->id.'/'.$s)}">{$label->name}</a>
                    {/volist}
                    <div class="clear"></div>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">作者推荐</div>
                    <ul class="fa-ul blog-module-ul">
                        {volist name="hots" id="hot"}
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="{:url('/article_'.$hot->id)}">{$hot->title}</a></li>
                        {/volist}
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">随便看看</div>
                    <ul class="fa-ul blog-module-ul">
                        {volist name="randArts" id="art"}
                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="{:url('/article_'.$art->id)}">{$art->title}</a></li>
                        {/volist}
                    </ul>
                </div>
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    layui.define(['form'],function(){
        var $ = layui.jquery;
        var form = layui.form();
        $('body').keydown(function (e) {
            if (e.keyCode == 13) {  //Enter键
                $('button[lay-filter=search]').click();
            }
        });
        form.on('submit(search)', function (data) {
            var index = layer.load(1);
            window.location.replace(baseUrl+'/technology/{$labelId}/'+data.field.key);
            return false;
        });
    });
</script>
{/block}